<template>
  <div class="item-header">
    <div class="left">
      <span v-for="(item, index) in menuArr" class="ftz16" :class="{'selected':curIndex === index}" :key="index" @click="nav(index)">{{item.name}}</span>
    </div>
    <div>
      <slot name="leftBtn"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    menuArr: {
      type: Array
    },
    selectedIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      curIndex: null
    }
  },
  computed: {
    curRoute () {
      return this.$route.path
    }
  },
  mounted () {
    this.curIndex = this.getIndex(this.curRoute)
  },
  watch: {
    selectedIndex (val) {
      this.curIndex = val
    }
  },
  methods: {
    nav (index) {
      this.curIndex = index
      if (this.menuArr.length > 1) {
        this.$emit('navFn', index)
      }
    },
    getIndex (route) {
      let curReturn = 0
      this.menuArr.some((item, index) => {
        if (item.route === route) {
          curReturn = index
          return true
        }
      })
      return curReturn
    }
  }
}
</script>

<style scoped lang="scss">
.item-header {
  height: 52px;
  line-height: 52px;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 0 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    span {
      color: #484848;
      border-bottom: 3px solid transparent;
      padding-bottom: 14px;
      margin-right: 60px;
      cursor: pointer;
      &.selected {
        border-bottom: 3px solid #f23e3e;
        color: #f23e3e;
      }
      &:hover {
        border-bottom: 3px solid #f23e3e;
      }
    }
  }
}
</style>
